<template>
  <view class="main-view">
    <text class="show-text">开始日期: {{formData1.c_plan_begin_time}}</text>
    <text class="show-text">结束日期: {{formData1.c_require_complete_time}}</text>
    <eui-datetime-range-picker
        :c_plan_begin_time="formData1.c_plan_begin_time"
        :c_require_complete_time="formData1.c_require_complete_time"
        :defTime="formData1.c_time"
        :timeIndex="timeIndex1"
        :visible="showDatePicker1"
        :model="dateModel1"
        :yearsArr="yearsArr"
        @cancel="handCancel"
        @confirm="handConfirm1"
        type="date"
    />
    <view class="button-view" @click="buttonClick1">
      <text>选择日期</text>
    </view>
    <view class="temp-view" />
    <text class="show-text">开始日期时间: {{formData2.c_plan_begin_time}}</text>
    <text class="show-text">结束日期时间: {{formData2.c_require_complete_time}}</text>
    <text class="show-text">时间间隔: {{formData2.c_time}} (分钟)</text>
    <eui-datetime-range-picker
        :c_plan_begin_time="formData2.c_plan_begin_time"
        :c_require_complete_time="formData2.c_require_complete_time"
        :defTime="formData2.c_time"
        :timeIndex="timeIndex2"
        :visible="showDatePicker2"
        :model="dateModel2"
        :yearsArr="yearsArr"
        @cancel="handCancel"
        @confirm="handConfirm2"
        type="datetime"
    />
    <view class="button-view" @click="buttonClick2">
      <text>选择日期时间</text>
    </view>
  </view>
</template>

<script>

import dayjs from 'dayjs';
export default {
  name: "index",
  data() {
    return {
      timeIndex1: 0,
      timeIndex2: 0,
      showDatePicker1: false,
      showDatePicker2: false,
      dateModel1: ['year', 'month', 'day'],
      dateModel2: ['year', 'month', 'day', 'hour', 'minute'],
      yearsArr: [dayjs().year(), dayjs().year()+10],
      formData1: {
        c_plan_begin_time: dayjs().format('YYYY-MM-DD'), // 计划开始时间
        c_require_complete_time: dayjs().add(30,'m').format('YYYY-MM-DD'), // 要求完成时间
        c_time: 30, // 预估用时(分钟)
      },
      formData2: {
        c_plan_begin_time: dayjs().format('YYYY-MM-DD HH:mm'), // 计划开始时间
        c_require_complete_time: dayjs().add(30,'m').format('YYYY-MM-DD HH:mm'), // 要求完成时间
        c_time: 30, // 预估用时(分钟)
      },
    }
  },
  methods:{
    handCancel(e) {
      this.showDatePicker1 = false;
      this.showDatePicker2 = false;
    },
    //日期
    buttonClick1(e) {
      this.showDatePicker1 = true;
    },
    handConfirm1(time1, time2) {
      if (time1) {
        this.formData1.c_plan_begin_time = time1;
      }
      if (time2) {
        this.formData1.c_require_complete_time = time2;
      }
      this.showDatePicker1 = false;
    },
    //日期时间
    buttonClick2(e) {
      this.showDatePicker2 = true;
    },
    handConfirm2(time1, time2) {
      if (time1) {
        this.formData2.c_plan_begin_time = time1;
      }
      if (time2) {
        this.formData2.c_require_complete_time = time2;
      }
      this.showDatePicker2 = false;
    },
  }
}
</script>

<style scoped>
.main-view {
  display: flex;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  background: #F2F2F2;
  position: relative;
}
.button-view {
  width: 100%;
  height: 66rpx;
  background: #00aaff;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.show-text {
  font-size: 36rpx;
  line-height: 45rpx;
  margin: 10rpx;
}

.temp-view {
  width: 100%;
  height: 100rpx;
}
</style>
